<template>
  <div>
    <q-layout view="lHh Lpr lFf">
      <q-header :elevated="elevatedHeader" class="col myheader text-white">
        <q-toolbar>
          <q-btn
              dense
              flat
              round
              icon="format_indent_decrease"
              @click="left = !left"
          />
          <q-toolbar-title>
            Intelligent SYS
            <q-badge color="dark" align="bottom">{{ firm }}</q-badge>
          </q-toolbar-title>

          <!-- 自定义按钮 -->

          <q-space/>


          <div class="q-gutter-sm row items-center no-wrap">
            <q-btn
                round
                dense
                flat
                color="white"
                icon="fullscreen"
                @click="isScreenfull"
            >
            </q-btn>

            <q-btn round dense flat color="white" icon="notifications">
              <q-badge rounded color="red" floating>4</q-badge>
            </q-btn>
            <q-btn round dense flat color="white" icon="group" target="_blank">
            </q-btn>
            <q-space/>
            <!--            <div class="helloUser">{{ helloUser }}</div>-->
            <q-item-section side>
              <q-btn
                  round
                  stretch
                  dense
                  outline
                  unelevated
                  flat
                  @click="dialog = !dialog"
              >
                <q-avatar rounded size="35px">
                  <img src="../assets/imgs/R-C.gif"/>
                </q-avatar>
              </q-btn>
            </q-item-section>
          </div>
        </q-toolbar>
      </q-header>

      <!-- 左侧菜单 @mouseout="miniState = miniState"-->

      <q-drawer
          show-if-above
          :mini="state.miniState"
          @mouseover="state.miniState = false"
          @mouseout="funMiniState_out"
          :mini-to-overlay="false"
          v-model="left"
          side="left"
          bordered
          :width="menuWidth"
          :breakpoint="599"
          :bordered="false"
          :elevated="elevatedSidebar"
      >

        <!-- 滚动区域 -->
        <q-scroll-area class="myleft fit">
          <!-- list 列表 -->
          <!-- http://www.quasarchs.com/vue-components/list-and-list-items -->

          <q-list>
            <template v-for="menu in box.myMenuList" :key="menu.path">
              <q-item v-if="!menu.children" clickable :to="menu.path">
                <q-item-section avatar>
                  <q-icon :name="menu.icon"></q-icon>
                </q-item-section>
                <q-item-section class="menuFout">{{
                    menu.title
                  }}
                </q-item-section>
              </q-item>
              <!-- http://www.quasarchs.com/vue-components/slide-item -->
              <q-expansion-item
                  class="menuFout"
                  v-if="menu.children"
                  :label="menu.title"
                  :icon="menu.icon"
              >
                <!-- <MenusDrawer :menus="menu.children"></MenusDrawer> -->
                <!-- -------------------------------------------------------------- -->
                <q-list separator v-for="menuChildren in menu.children">
                  <q-item
                      clickable
                      v-ripple
                      :to="menuChildren.path"
                      :inset-level="0.5"
                  >
                    <q-item-section avatar>
                      <q-icon :name="menuChildren.icon"></q-icon>
                    </q-item-section>
                    <q-item-section avatar>
                      {{ menuChildren.title }}
                    </q-item-section>
                  </q-item>
                </q-list>
                <!-- ---------------------------------------------------------------- -->
              </q-expansion-item>
            </template>
          </q-list>
        </q-scroll-area>
      </q-drawer>
      <!--      加载动画-->
      <q-page-container>
        <router-view/>
        <div class="column items-center" v-show="store.isShow">
          <q-spinner-ball color="teal" size="6em"/>
        </div>
      </q-page-container>
      <!--&lt;!&ndash;错误提示框&ndash;&gt;    msgIsShow:false,    msgStr:"",-->


      <q-dialog v-model="store.msgIsShow">
        <q-card class="bg-red text-white" style="width: 500px">
          <q-card-section>
            <div class="text-h6">提示</div>
          </q-card-section>

          <q-card-section class="q-pt-none">
            {{ store.msgStr }}
          </q-card-section>


        </q-card>
      </q-dialog>


    </q-layout>
  </div>

  <!-- 消息框 -->
  <!-- full-height -->
  <q-dialog v-model="dialog" full-height position="right">
    <div>
      <q-card class="column" full-height style="width: 320px">
        <!-- 一部分 -->
        <div class="col" style="max-height: 250px">
          <q-btn flat @click="dialog = false" color="dark" icon="close"/>
          <q-card-section class="row justify-center">
            <q-avatar rounded size="125px">
              <img src="../assets/imgs/R-C.gif"/>
            </q-avatar>
          </q-card-section>
          <div class="row justify-around">
            <q-btn flat color="primary" label="修改密码" @click="showUpDataPassWord=true"/>
            <q-btn flat color="secondary" label="退出登录" @click="webLogoff"/>
          </div>
          <q-separator inset spaced="10px"/>
        </div>
        <!-- 二部分 个人设置区 -->
        <q-card-section class="col">
          <div class="column">
            <q-checkbox
                keep-color
                v-model="layoutsCheckbox_a"
                label="暗黑模式"
                color="Teal"
            />
            <q-checkbox
                keep-color
                v-model="layoutsCheckbox_b"
                label="紧凑模式"
                color="orange"
            />

            <q-checkbox
                keep-color
                v-model="elevatedHeader"
                label="顶部阴影"
                color="cyan"
            />
            <q-checkbox
                keep-color
                v-model="state.isMiniState"
                label="菜单折叠"
                color="purple"
            />
            <q-checkbox
                keep-color
                v-model="layoutsCheckbox_e"
                label="菜单到顶"
                color="green"
            />
            <q-checkbox
                keep-color
                v-model="elevatedSidebar"
                label="菜单阴影"
                color="pink"
            />
          </div>
        </q-card-section>
        <q-separator inset spaced="10px"/>
        <!-- 第三部分  声音 音量 亮度 -->
        <q-card-section class="col-2">
          <div class="column">
            <q-item>
              <q-item-section avatar>
                <q-icon color="teal" name="volume_up"/>
              </q-item-section>
              <q-item-section>
                <q-slider v-model="volume" :min="0" :max="10" color="teal"/>
              </q-item-section>
            </q-item>

            <q-item>
              <q-item-section avatar>
                <q-icon color="primary" name="mic"/>
              </q-item-section>
              <q-item-section>
                <q-slider v-model="mic" :min="0" :max="50"/>
              </q-item-section>
            </q-item>
            <q-item>
              <q-item-section avatar>
                <q-icon color="deep-orange" name="brightness_medium"/>
              </q-item-section>
              <q-item-section>
                <q-slider
                    v-model="brightness"
                    :min="0"
                    :max="10"
                    color="deep-orange"
                />
              </q-item-section>
            </q-item>
          </div>
        </q-card-section>
        <q-separator inset spaced="5px"/>
        <!-- 第四部分    设置左侧菜单宽度 字体大小 label -->
        <q-card-section class="col-2">
          <div class="column">
            <q-badge class="text-centre" color="grey">
              <q-icon name="build" color="white" left/>
              设置左侧菜单宽度 &
              字体大小
            </q-badge>
            <q-item>
              <q-item-section>
                <q-slider
                    color="brown-6"
                    v-model="menuWidth"
                    :min="0"
                    :max="500"
                />
              </q-item-section>
            </q-item>
            <q-item>
              <q-item-section>
                <q-slider
                    color="purple"
                    v-model="menuWidth"
                    :min="10"
                    :max="20"
                />
              </q-item-section>
            </q-item>
          </div>
        </q-card-section>
        <q-separator inset spaced="5px"/>
        <!-- 第五部分  全局颜色 -->
        <q-card-section class="col-2">
          <div class="column">
            <q-badge class="text-centre" color="grey">
              <q-icon name="build" color="white" left/>
              全局主色调
            </q-badge>
            <q-item>
              <q-item-section>
                <div class="q-pa-xs q-gutter-md">
                  <q-btn size="xs" round color="primary" glossy/>
                  <q-btn size="xs" round color="amber" glossy/>
                  <q-btn size="xs" round color="brown-5" glossy/>
                  <q-btn size="xs" round color="deep-orange" glossy/>
                  <q-btn size="xs" round color="purple" glossy/>
                  <q-btn size="xs" round color="black" glossy/>
                </div>
              </q-item-section>
            </q-item>

            <q-item>
              <q-item-section avatar>
                <div class="q-pa-xs q-gutter-md">
                  <q-btn size="xs" round color="primary" glossy/>
                  <q-btn size="xs" round color="amber" glossy/>
                  <q-btn size="xs" round color="brown-5" glossy/>
                  <q-btn size="xs" round color="deep-orange" glossy/>
                  <q-btn size="xs" round color="purple" glossy/>
                  <q-btn size="xs" round color="black" glossy/>
                </div>
              </q-item-section>
            </q-item>
            <q-item>
              <q-item-section avatar>
                <div class="q-pa-xs q-gutter-md">
                  <q-btn size="xs" round color="primary" glossy/>
                  <q-btn size="xs" round color="amber" glossy/>
                  <q-btn size="xs" round color="brown-5" glossy/>
                  <q-btn size="xs" round color="deep-orange" glossy/>
                  <q-btn size="xs" round color="purple" glossy/>
                  <q-btn size="xs" round color="black" glossy/>
                </div>
              </q-item-section>
            </q-item>
          </div>
        </q-card-section>
      </q-card>
    </div>
  </q-dialog>

  <!--  修改密码-->

  <div class="q-pa-md q-gutter-sm">
    <q-dialog
        v-model="showUpDataPassWord"
        persistent
        :maximized="maximizedToggle"
        transition-show="slide-up"
        transition-hide="slide-down"
    >
      <q-card class="bg-primary text-white">
        <q-bar>
          <q-space />
          <q-btn dense flat icon="minimize" @click="maximizedToggle = false" :disable="!maximizedToggle">
            <q-tooltip v-if="maximizedToggle" content-class="bg-white text-primary">Minimize</q-tooltip>
          </q-btn>
          <q-btn dense flat icon="crop_square" @click="maximizedToggle = true" :disable="maximizedToggle">
            <q-tooltip v-if="!maximizedToggle" content-class="bg-white text-primary">Maximize</q-tooltip>
          </q-btn>
          <q-btn dense flat icon="close" v-close-popup>
            <q-tooltip content-class="bg-white text-primary">Close</q-tooltip>
          </q-btn>
        </q-bar>
        <q-card class="bg-teal text-white" style="width: 300px">
          <q-card-section class="bg-white text-teal ">
            <q-input   lazy-rules type="password"  flat label="新密码" v-model="newPassWord1"></q-input>
            <q-input    lazy-rules  type="password" flat label="重复输入" v-model="newPassWord2"></q-input>
          </q-card-section>
          <q-card-actions align="right" class="bg-white text-teal">
            <q-btn flat label="修改" @click="webUpDataPassWord"/>
          </q-card-actions>
        </q-card>
      </q-card>
    </q-dialog>
  </div>
  <q-input round dense flat label="重复输入"></q-input>

</template>

<script>
import screenfull from "screenfull";
import {menuList_ve, menuList, menuList_wh} from "./menuList";
import {onMounted, reactive, ref, toRaw, watch} from "vue";
import {useCounterStore} from 'stores/counter';
import {logoff, upDataPassWord} from "src/API/User/user";
import {getMaxOutStockApplyId} from "src/API/OutStockApply/OutStockApplyAPI";
import {addAnyID} from "src/utils/goodsTools";
import {useRouter} from "vue-router";
import {getUnfinishedPurchaseOrderId} from "src/API/InStock/inStockAPI";

export default {
  // methods: {upDataPassWord, logoff},

  data() {
    const router = useRouter();
    const helloUser = ref("下午好!   朱俊宇");

    const state = reactive({
      miniState: true,
      isMiniState: true,
    });
      //
      onMounted(function () {
          console.log("activePath_____"+window.sessionStorage.getItem("power"))
          funMenuList();
          function funMenuList() {
              if (window.sessionStorage.getItem("power")=='all' ){
                console.log("activePath_____"+window.sessionStorage.getItem("power"))
                box.myMenuList = menuList;
                console.log(box.myMenuList)
              }else if (window.sessionStorage.getItem("power")=='wh' ) {
                console.log("activePath_____"+window.sessionStorage.getItem("power"))
                box.myMenuList= menuList_wh
                console.log(box.myMenuList)
              }
              else  {
                console.log("activePath_____"+window.sessionStorage.getItem("power"))
                box.myMenuList= menuList_ve
                console.log(box.myMenuList)
              }
          }
      });
    // onMounted(function () {
    //   // keep-alive 每次都执行和只执行一次的页面 当组件在 内被切换时，它的 mounted 和 unmounted 生命周期钩子不会被调用，取而代之的是activated 和 deactivated。(这会运用在 的直接子节点及其所有子孙节点。)
    //   console.log("主页的生命周期函数执行了-666");
    //   // store.btnAname="default"
    //
    //   // store.$reset()
    //   store.JiTangStr = store.JiTangList[Math.floor(Math.random() * store.JiTangList.length + 1)]
    // });

    const store = useCounterStore();
    const Mycolor = [
      "red",
      "green",
      "purple",
      "orange",
      "primary",
      "teal",
      "white",
      "grey",
    ];

    function menuStyles() {
      (background =
          "linear-gradient(145deg, " +
          this.colorHeaderBg1 +
          " 15%, " +
          this.colorHeaderBg2 +
          " 70%)"),
          (color = this.colorHeaderText),
          console.log(background);
      console.log(color);
      return {
        background:
            "linear-gradient(145deg, " +
            this.colorHeaderBg1 +
            " 15%, " +
            this.colorHeaderBg2 +
            " 70%)",
        color: this.colorHeaderText,
      };
    }

    function isScreenfull() {
      // screenfull.isFullscreen; // 布尔值——当前页面是否全屏
      // screenfull.isEnabled; // 布尔值——当前浏览器是否支持全屏
      // screenfull.exit(); // 退出全屏
      screenfull.toggle(); // 全屏切换
      // screenfull.request(); // 全屏
    }

    watch(
        () => state.isMiniState,
        (isMiniState_value) => {
          state.miniState = isMiniState_value;
        }
    );

    function funMiniState_out() {
      if (state.isMiniState) {
        state.miniState = true;
      } else if (!state.isMiniState) {
        state.miniState = false;
      }
    }

    function webLogoff() {
      window.sessionStorage.removeItem("token");
      router.push("/");
      // async function cc() {
      //   var res = await getMaxOutStockApplyId();
      //   console.log(res.data);
      // }
    }
    let  newPassWord1=ref(null)
    let  newPassWord2=ref(null)
    function webUpDataPassWord() {
      // console.log(newPassWord1.value)
      // console.log(newPassWord2.value)
      if (newPassWord1.value != newPassWord2.value) {
        alert("两次输入的密码不一致")
      } else if (newPassWord1.length < 7) {
        alert("密码不能少于7位")
      } else {
        var webReq = JSON.stringify(
            {
              "userNameID": window.sessionStorage.getItem("userNameID"),
              "passWord": newPassWord1.value+"",
            }
        );
        cc(webReq)
        async function cc(webReq) {
          var res = await upDataPassWord(webReq);
          console.log(res);
          if (res.code==200){
            alert("修改成功")
          }else {
            alert("修改失败,请重新试过")
          }
        }
      }
    }


    return {
      showUpDataPassWord: false,
      maximizedToggle: false,
      newPassWord1 ,
      newPassWord2 ,
      webUpDataPassWord,
      webLogoff,
      firm: window.sessionStorage.getItem("firm"),
      helloUser,
      left: false,
      // menuList,
      // menuList_StockUser,
      box,
      dialog: false,
      layoutsCheckbox_a: true,
      layoutsCheckbox_b: true,
      elevatedHeader: false,
      layoutsCheckbox_d: true,
      layoutsCheckbox_e: false,
      elevatedSidebar: true,
      volume: 6,
      brightness: 3,
      mic: 8,
      menuWidth: 225,
      state,
      store,
      menuStyles,
      isScreenfull,
      funMiniState_out,
    };
  },
};
const box = reactive({
  myMenuList:null
});
</script>

<style scoped>
.myleft {
  background-color: #363636;
  color: #ffffff;
}

.myheader {
  background-color: #424141;
  color: #ffffff;
}

.helloUser {
  color: #e68953;
  font-weight: bolder;
}

.menuFout {
  font-size: 16px;
  /* font-weight: bolder; */
}
</style>
